{% extends 'base.html' %}
{% load staticfiles %}

{% block right_content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-header">
                    <div class="mailbox-read-info">
                        <h3 class="box-title"><i class="fa fa-code"></i> <span
                                class="text-red">我的工单</span></h3>
                    </div>
                </div>
                <div class="box-body">
                    <table id="demo-table"></table>
                </div>
            </div>
        </div>
    </div>

    <!-- 任务进度模态框 -->
    <div class="modal fade" id="modal_tasks_show" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h5>
                        <small><cite>
                            <i class="fa fa-check" style="color: green"></i>: 表示已经执行，
                            <i class="fa fa-close" style="color: red"></i>: 表示未推到该环境，
                            其他状态: 表示当前工单的进度
                        </cite></small>
                    </h5>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="box-body">
                            <table id="tasks-table"></table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block link_javascripts %}
    <script>
        /**
         * 初始化bootstrap-table，生成表格
         */
        $(function () {
            let $table = $('#demo-table');
            $table.bootstrapTable({
                method: 'get',
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded",
                url: "{% url 'p_get_my_orders' %}",
                cache: false,
                queryParams: function (params) {
                    return {
                        limit_size: params.limit + params.offset,
                        offset_size: params.offset,
                        search_content: params.search
                    }
                },
                sidePagination: "server",
                showColumns: true,
                pagination: true,
                search: true,
                showRefresh: true,
                singleSelect: true,
                minimumCountColumns: 2,
                pageNumber: 1,
                pageSize: 10,
                locale: 'zh-CN',
                pageList: [10, 20],
                uniqueId: "id",
                rowStyle: render_row_style,
                classes: 'table table-hover table-no-bordered',

                columns: [
                    {
                        field: 'progress_value',
                        title: '进度',
                        formatter: function (value, row) {
                            return "<button type='button' class='btn " + row.progress_color + " btn-sm'>" + value + "</button>"
                        }
                    },
                    {
                        field: 'title',
                        title: '标题',
                        formatter: function (value, row) {
                            if (value.length >= 16) {
                                return '<a href="/sqlorders/sql_orders_details/' + row.id + '" title=\"' + value + '\">' + value.slice(0, 16) + '</a>'
                            }
                            else {
                                return '<a href="/sqlorders/sql_orders_details/' + row.id + '" title=\"' + value + '\">' + value + '</a>'
                            }
                        }
                    },
                    {
                        field: 'sql_type',
                        title: '类型'
                    },
                    {
                        field: 'remark',
                        title: '备注'
                    },
                    {
                        field: 'task_version',
                        title: '任务',
                        formatter: function (value) {
                            return "<a href='#' onclick='deploy_tasks_table(" + "\"" + value + "\"" + ")'>" + value + "</a>"
                        }
                    },
                    {
                        field: 'host',
                        title: '主机/库',
                        formatter: function (value, row) {
                            return value + ':' + row.port + '<br>' + row.database
                        }
                    },
                    {
                        field: 'proposer',
                        title: '申请人'
                    },
                    {
                        field: 'auditor',
                        title: '审批人'
                    },
                    {
                        field: 'created_at',
                        title: '提交时间',
                        formatter: function (value) {
                            return moment(value).format('YYYY-MM-DD HH:mm:ss');
                        }
                    }
                ],

                {#onLoadSuccess: function (value) {#}
                {#    // 权限视图隐藏#}
                {#    // 此处即使可以看见，后台也有权限进行控制#}
                {#    if (value.total > 0) {#}
                {#        let view_permission = value.rows[0].permissions;#}
                {#        if (view_permission.indexOf('can_audit_sql') < 0) {#}
                {#            // 隐藏审批权限的显示#}
                {#            $('#demo-table').bootstrapTable('hideColumn', 'approve')#}
                {#        }#}
                {#        if (view_permission.indexOf('can_execute_sql') < 0) {#}
                {#            // 隐藏执行和反馈权限的显示#}
                {#            $table.bootstrapTable('hideColumn', 'execute');#}
                {#            $table.bootstrapTable('hideColumn', 'feedback')#}
                {#        }#}
                {#    }#}
                {# }#}
            })
        });

        /**
         * 每3s刷新一次表格
         */

        $(function () {
            function refreshTable() {
                $('#demo-table').bootstrapTable('refresh', {silent: true});
            }

            setInterval(refreshTable, 3000);
        });

        /**
         * 渲染行的样式
         * 已完成的自动标记为：绿色(success)
         * 关闭的自动标记为：红色(danger)
         */
        function render_row_style(row, index) {
            let finish_status = ['已完成', '已关闭', '已勾住'];
            if (finish_status.indexOf(row.progress_value) < 0) {
                return {classes: 'danger'}
            } else {
                return {};
            }
        }
    </script>
{% endblock %}